<template>
	<scroll ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback"
	 @emptyclick="emptyClick">
		<stop isBack>
			<view slot="content">交流空间</view>
		</stop>
		<view class="bcf">
			<view class="bdbdo" v-for="row in data" :key="log.id">
				<view class="flex-r flex-start bc13 pad2">
					<view class="wh15-15 round ofh  bdso">
						<image :src="pic(row.user.pic)" mode="aspectFill" class="wh15-15"></image>
					</view>
					<view class="marl3 flex1 marr3 mart2">
						<view class="fs12 c12 fwb lh15">{{row.user.name}}</view>
						<view class="fs8 c12">{{datetime(row.createAt)}}</view>
						<view class="padtb2">
							{{row.text}}
						</view>
						
					</view>
				</view>
				<view class="pad2 mart3">
					<view v-if="row.pics.length > 0">
						<!-- 一张图的布局 -->
						<view v-for="item in row.pics">
							<image :src="pic(item)" @tap="viewPic(pic(item),pics(row.pics))" mode="widthFix" class="w100"></image>
						</view>
					</view>
					<view class="padtb3">
						<view class="flrc c12">
							<view class="flex1"></view>
							<slove :itemId="row.id" src="/api_/zones"></slove>
						</view>
					</view>
				</view>
			</view>
			<view class="mar3 pad3 tac bddo round3" v-if="comments.length == 0">
				暂无评论，抢占一楼吧！
			</view>
			<view class="padtb1 bc13" v-for="item,index in comments" @click="setReplyTo(item)">
				<view class="flex-r flex-start bcf pad2 pos-r ofh">
					<view>
						<view class="wh15-15 round ofh  bdso">
							<image :src="pic(item.user.pic)" mode="aspectFill" class="wh15-15"></image>
						</view>
						<view class="padtb1 tac c12">
							{{index + 1}}楼
						</view>
					</view>
					<view class="marl3 flex1 marr3">
						<view class="fs12 text-cyan fwb lh15 mart1">{{item.user.name}}</view>
						<view class="fs8 c12 mart1">{{datetime(item.createAt)}}</view>
						<view class="padtb2 fwb mart2">
							<view>
								<text class="text-cyan" v-if="item.replyTo != null">回复{{objval(item,['replyTo','user',"name"])}}: </text>
								{{item.text}}
							</view>
						</view>
					</view>
					<ripple></ripple>
				</view>
			</view>
			<view class="bcf c13 pad10 tac">我是有底线的</view>
		</view>
		<loading :loading="myIsLoading"></loading>
		<view class="pos-f b0 l0 r0 bcf shadow3 padtb1">
			<view class="flrc w100 bcf pad2">
				<view class="flex6 bc13 round3">
					<textarea style="height: 2.4em;padding: 0.2em 0.5em;" class="roud3 w100" v-model="text" :placeholder="placeholder"></textarea>
				</view>
				<view @tap="submit" class="cu-btn bg-cyan flex1 lg tac round marl2">
					发布
				</view>
			</view>
		</view>
	</scroll>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import List from '../../assets/js/list.js'
	import Zan from '../../assets/js/zan.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			let list = new List()
			return {
				cid:0,
				list,
				data: [],//主体
				comments: [],//评论
				dataInfo:{},
				where: {
					eq: {
						zone:'',
						status: '',
						category: '',
						groups: '',
					}
				},
				search: "",
				src: "/api_/zones",
				//评论发布
				text:'',
				replyTo:'',
				placeholder:'发布您的评论',
				upOption:{
					use:false
				}
			}
		},
		methods: {
			reload() {
				this.showLoading()
				// this.comments = []
				this.list.setData({
					_order: {
						id: "ASC"
					},
					_where: this.where,
					_search: this.search,
					_g: ['user', 'zone']
				}).reload()
			},
			submit(){
				this.$api.post("/api/zoneComments",{
					zone:"/api_/zones/"+this.cid,
					text:this.text,
					replyTo:this.replyTo,
				},res=>{
					this.reload()
					this.placeholder = "发布您的评论"
					this.replyTo = ''
					this.text = ''
				})
			},
			setReplyTo(row){
				this.placeholder = "回复："+row.user.name
				this.replyTo = '/api_/zone_comments/'+row.id
			}
		},
		mounted() {
			this.list.initMescroll(this).setUrl('/api/zoneComments').setData({
				_order: {
					id: "ASC"
				},
				_where: this.where,
				_search: this.search,
				_g: ['user', 'zone']
			}).setCbFunc(res => {
				this.comments = res
				this.clearLoading()
			}).reload()
		},
		onLoad(option) {
			this.cid = option.id
			this.where.eq.zone = this.cid
			this.$api.get('/api/zones/'+this.cid, {
					_g: ['user', 'zone'],
				}, res => {
				this.data = [res.d]
				this.log(res.d)
			})
		},
		onShow() {
			this.list.reload()
		}
	}
</script>

<style>
</style>
